<template>
  <el-container class="profile-container">
    <el-header class="profile-header">
      <h1 @click="goToHome" class="home">XX网购物平台</h1>
      <div class="user-info">
        <el-button type="default" @click="goToCart" icon="el-icon-shopping-cart-full" class="cardButton">
          购物车
        </el-button>
        <el-button type="default" @click="goToOrders" icon="el-icon-document" class="orderButton">
          我的订单
        </el-button>
      </div>
    </el-header>
    <el-main class="profile-main">
      <el-row type="flex" justify="start">
        <el-col :span="8" class="personal-info">
          <el-card class="profile-info-card">
            <div class="user-avatar-container">
              <img :src="avatarUrl" class="user-avatar" alt="用户头像">
            </div>
            <h2 class="nickname">{{ nickname }}</h2>
            <p class="bio">{{ bio }}</p>
            <div class="contact-action">
              <div class="contact-info">
                <span class="location-icon">📍</span> {{ location }}
              </div>
              <div class="action-buttons">
                <el-button type="text" icon="el-icon-chat-line-square">消息</el-button>
                <el-button type="text" icon="el-icon-message">邮件</el-button>
                <el-button type="text" icon="el-icon-user">Hire</el-button>
              </div>
            </div>
            <div class="user-details">
              <div class="detail-item">
                <span>姓名:</span> <span>{{ userInfo.name }}</span>
              </div>
              <div class="detail-item">
                <span>年龄:</span> <span>{{ userInfo.age }}</span>
              </div>
              <div class="detail-item">
                <span>性别:</span> <span>{{ userInfo.gender }}</span>
              </div>
            </div>
            <div class="stats">
              <div class="stat-item">
                <div>订单</div>
                <span class="stat-number">{{ orders }}</span>
              </div>
              <div class="stat-item">
                <div>购物车</div>
                <span class="stat-number">{{ cart }}</span>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="16" class="tabs-container">
          <el-tabs v-model="activeTab" class="tabs">
            <el-tab-pane label="个人信息" name="personalInfo">
              <PersonalInfo/>
            </el-tab-pane>
            <el-tab-pane label="地址管理" name="addressManagement">
              <AddressManagement/>
            </el-tab-pane>
            <el-tab-pane label="待评价" name="pendingReview">
              <PendingReview/>
            </el-tab-pane>
            <el-tab-pane label="我的评价" name="myReviews">
              <MyComments/>
            </el-tab-pane>
          </el-tabs>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script>
import PersonalInfo from '../ShopView/Profile/PersonalInfo.vue';
import AddressManagement from '../ShopView/Profile/AddressManagement.vue';
import PendingReview from '../ShopView/Profile/PendingReview.vue';
import MyComments from './Profile/MyComments.vue';
import {mapGetters} from "vuex";
import {loadProfile} from "@/api/profileApi";

export default {
  name: 'ShopProfile',
  components: {
    PersonalInfo,
    AddressManagement,
    PendingReview,
    MyComments
  },
  data() {
    return {
      activeTab: 'personalInfo',
      avatarUrl: '',
      nickname: '',
      bio: '',
      location: '',
      orders: 0,
      cart: 0,
      userInfo: {
        name: '',
        age: 0,
        gender: '',
      }
    };
  },
  created() {
    this.loadUser();
  },
  computed: {
    ...mapGetters({
      getUser: 'user/getUser'
    })
  },
  methods: {
    loadUser() {
      const users = this.getUser
      // 使用 axios 获取用户信息
      loadProfile(users)
          .then(response => {
            const data = response.data;
            this.avatarUrl = data.avatarUrl;
            this.nickname = data.nickname;
            this.bio = data.selfIntroduction;
            this.location = data.location;
            this.orders = data.ordersCount;
            this.cart = data.cartCount;
            this.userInfo.name = data.userName;
            this.userInfo.age = data.age;
            this.userInfo.gender = data.gender;
            this.userInfo.username = data.username;
          })
          .catch(error => {
            console.error('加载用户信息失败:', error);
          });
    },
    goToCart() {
      if (this.$route.path !== '/shopCart') {
        this.$router.push('/shopCart');
      }
    },
    goToOrders() {
      if (this.$route.path !== '/shopOrder') {
        this.$router.push('/shopOrder');
      }
    },
    goToHome() {
      if (this.$route.path !== '/shop') {
        this.$router.push('/shop');
      }
    }
  }
};
</script>

<style scoped>
/* 样式保持不变 */
.profile-container {
  font-family: Arial, sans-serif;
}

.profile-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background-color: powderblue /* 淡蓝色背景 */
}

.user-info {
  display: flex;
  align-items: center;
}

.profile-main {
  padding: 20px 200px;
}

.personal-info {
  margin-right: 20px;
}

.tabs-container {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.tabs {
  margin-top: 20px;
}

.profile-info-card {
  margin-bottom: 20px;
}

.user-avatar {
  width: 150px;
  height: 150px;
  border-radius: 50%;
}

.user-details {
  margin-top: 20px;
}

.contact-info {
  margin-top: 10px;
}

.action-buttons {
  margin-top: 20px;
}

.stats {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

.detail-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}

.profile-info-card {
  padding: 20px;
}

.user-avatar-container {
  padding: 10px;
  text-align: center;
}

.user-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

.nickname {
  font-size: 24px;
  margin-top: 10px;
}

.bio {
  font-size: 14px;
  color: #666;
  margin-top: 5px;
}

.contact-action {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}

.contact-info {
  font-size: 14px;
  color: #666;
}

.action-buttons {
  display: flex;
  gap: 5px; /* 按钮之间的间距 */
}

.user-details {
  margin-top: 20px;
  font-size: 14px;
}

.detail-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}

.stats {
  margin-top: 20px;
  font-size: 14px;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 10px;
  font-weight: bold;
}

.stat-number {
  font-size: 24px; /* 数字变大 */
  color: #ff5722; /* 使数量更加明显 */
}

.el-button i {
  margin-right: 5px; /* 图标和文字之间的间距 */
}

.cardButton, .orderButton {
  color: #409EFF; /* 更改文字颜色 */
}

.cardButton i, .orderButton i {
  color: #66bafff; /* 图标颜色 */
}

.home {
  cursor: pointer; /* 添加手型光标 */
}
</style>